<template>
  <div class="base">
    <h1>邮件测试</h1>
    <el-form ref="form"
             :model="form"
             width="200px"
             label-width="100px">
      <el-form-item label="邮件主题"
                    prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>

      <el-form-item label="会议时间"
                    prop="datetime"
                    :rules="{ required: true, message: '请选择会议起止时间', trigger: 'blur' }">
        <el-date-picker v-model="form.datetime"
                        type="datetimerange"
                        :picker-options="form.pickerOptions"
                        format="yyyy-MM-DD HH:mm"
                        value-format="yyyy-MM-DD HH:mm"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        align="left"
                        style="width: 100%;">
        </el-date-picker>
      </el-form-item>
      <el-form-item v-for="(receiver, index) in form.receivers"
                    :label="'收件人' + (index+1)"
                    :key="receiver.key"
                    :prop="'receivers.'+ index+'.value' "
                    :rules="[{
      required: true, message: '收件人邮箱不能为空', trigger: 'blur'
    },{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }]">
        <el-input v-model="receiver.value"><i slot="suffix"
             @click.prevent="removeDomain(receiver)"
             class="el-input__icon el-icon-error"></i></el-input>
      </el-form-item>
      <el-form-item label="邮件内容"
                    prop="desc">
        <el-input type="textarea"
                  v-model="form.desc"></el-input>
      </el-form-item>
      <el-form-item label="邮件URL"
                    prop="url">
        <el-input v-model="form.url"></el-input>
      </el-form-item>

    </el-form>
    <div class="footerBtn">
      <el-button type="success"
                 @click="addDomain"
                 round>添加收件人</el-button>
      <el-button type="primary"
                 @click="submitForm('form')"
                 round>立即创建</el-button>
      <el-button type="info"
                 @click="resetForm('form')"
                 round>重置表单</el-button>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  data () {
    return {
      form: {
        name: '',
        receivers: [{
          value: ''
        }],
        datetime: '',
        desc: '',
        url: '',
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick (picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick (picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick (picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
      }
    }
  },
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.form);
          const { name, receivers, datetime, desc, url } = this.form
          console.log("form===>", this.form);
          console.log('startTime:', datetime[0]);
          axios
            .get('http://127.0.0.1:8080/api/interview/email', {
              params: {
                name: name,
                receiver: receivers[0],
                url: url,
                desc: desc,
                startTime: datetime[0],
                endTime: datetime[1]
              }
            }).then(response => (console.log(response.data)))
            .catch(error => console.log(error))
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm (formName) {
      this.$refs[formName].resetFields();
    },
    addDomain () {
      this.form.receivers.push({
        value: '',
        key: Date.now()
      });
    },
    removeDomain (item) {
      var index = this.form.receivers.indexOf(item)
      if (index !== -1) {
        this.form.receivers.splice(index, 1)
      }
    },
  }
}
</script>
<style>
.base {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.base > h1 {
  width: 100%;
}
.footerBtn {
  width: 100%;
}
</style>